<template>
  <div class="flow-designer-container" v-loading="loading">
    <div class="flow-designer-header">
      <LayoutHeader v-model="activeSelect" @input="changeActiveSelect" @draft="draft" @publish="publish" />
    </div>
    <div class="flow-designer-body">
      <div class="layout-body">
        <FormBaseSetting ref="baseSettingRef" v-show="activeSelect === 'baseSetting'" :dsgn-item="dsgnItem" />
        <FormV3Designer
          ref="formSettingRef"
          v-if="formMode === WebDesignerMode.FormV3 && loadSbuComponent"
          v-show="activeSelect === 'formSetting'"
        />
        <FormCreateDesigner
          ref="formSettingRef"
          v-if="formMode === WebDesignerMode.FormCreate && loadSbuComponent"
          v-show="activeSelect === 'formSetting'"
        />
        <FlowDesigner
          v-if="procMode === WebDesignerMode.FlowDesigner && loadSbuComponent"
          ref="processDesignRef"
          v-show="activeSelect === 'processDesign'"
        />
        <ApprovalProSetting ref="proSettingRef" v-show="activeSelect === 'proSetting'" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import LayoutHeader from '@/components/Designer/flow/components/FlowLayoutHeader.vue'
import FormBaseSetting from '@/components/Designer/flow/components/FormBaseSetting.vue'
import ApprovalProSetting from '@/components/Designer/flow/components/ApprovalProSetting.vue'
import FlowDesigner from '@/components/Designer/flow/flowDesigner/FlowDesigner.vue'
import FormV3Designer from '@/components/Designer/form/formDesigner/FormV3Designer.vue'
import FormCreateDesigner from '@/components/Designer/form/formDesigner/FormCreateDesigner.vue'

import { defineProps, PropType } from 'vue'
import {
  DesignerMixinData,
  useDesignerMixin,
  WebDesignerMode
} from '@/components/Designer/mixins/DesignerMixin'
import { useApprovalDesignerStore } from '@/store/modules/dsgn/ApprovalDesigner'
import { DsgnVo } from '@/api/res/approval/vo/DsgnServiceVo'
import { DsgnBasicVo } from '@/api/res/approval/vo/DsgnBasicVo'
import { DsgnFormVo } from '@/api/res/approval/vo/DsgnFormVo'
import { DsgnProcVo } from '@/api/res/approval/vo/DsgnProcVo'
import { DsgnExtVo } from '@/api/res/approval/vo/DsgnExtVo'
import { CenterApi } from '@/api/res/ResCenter'

defineOptions({
  name: 'ApprovalDesigner'
})

const props = defineProps({
  propMixin: Object as PropType<DesignerMixinData>,
  formMode: {
    type: Number,
    default: WebDesignerMode.FormCreate
  },
  procMode: {
    type: Number,
    default: WebDesignerMode.FlowDesigner
  }
})

const designerStore = useApprovalDesignerStore()



const message = useMessage() // 消息弹窗
const dsgnItem = props.propMixin.dsgnItem
const actionItem = props.propMixin.actionItem
const loading = ref(true)
const useDesigner = useDesignerMixin(props.propMixin)
provide('designerMixin', useDesigner)



// provide('formType', 10)

const loadSbuComponent = ref(false)
const activeSelect = ref('')

const dsgnModelId = ref('')
const baseSettingRef = ref()
const formSettingRef = ref()
const processDesignRef = ref()
const proSettingRef = ref()

// const designerModel = designerStore.designerModel

const changeActiveSelect = (newSelAct: string) => {
  activeSelect.value = newSelAct

  if(activeSelect.value === 'processDesign'){
    updateFormDsgnConfig();



  }

}

const designerVo = ref<DsgnVo>(new DsgnVo())
const approvalBasicVo = ref<DsgnBasicVo>(new DsgnBasicVo())
const approvalFormVo = ref<DsgnFormVo>(new DsgnFormVo())
const approvalProcVo = ref<DsgnProcVo>(new DsgnProcVo())
const approvalExtVo = ref<DsgnExtVo>(new DsgnExtVo())

onMounted(async () => {
  if (dsgnItem) {
    Object.assign(approvalBasicVo.value, useDesigner.getBasicInfo(), {
      formMode: props.formMode,
      procMode: props.procMode
    })
  }
  Object.assign(designerVo.value, {
    basic: approvalBasicVo.value,
    form: approvalFormVo.value,
    proc: approvalProcVo.value,
    ext: approvalExtVo.value
  })
  designerStore.setDesignerModel(designerVo.value);

  await loadInitData()

  loading.value = false
  activeSelect.value = 'baseSetting'
})

const loadInitData = async () => {
  const resId = useDesigner.getResId()
  if (resId) {
    const resModel = await CenterApi.getDsgnById(useDesigner.getResId())
    designerStore.setDsgnModelBasic(resModel.basic);
    designerStore.setDsgnModelForm(resModel.form);
    designerStore.setDsgnModelProc(resModel.proc);
    designerStore.setDsgnModelExt(resModel.ext);
    designerVo.value = resModel
    // designerModel.value.form = resModel.form
    // designerModel.value.proc = resModel.proc
    // designerStore.designerModel = designerModel.value

    loadSbuComponent.value = true
    dsgnModelId.value = resModel.basic.dsgnId
  }
}

// provide('dsgnFormService', formSettingRef.value.dsgnFormService.getFormConfig)

const updateFormDsgnConfig = () => {
  const formJson = formSettingRef.value.dsgnFormService.getFormConfig()
  const formVo = new DsgnFormVo()
  formVo.configJson = formJson
  // designerModel.form.value = formVo
  designerStore.setDsgnModelForm(formVo);
  // designerStore.designerModel.form.value = formVo
}


const fillDesignerModel = () => {
  updateFormDsgnConfig();
  const procJson = processDesignRef.value.processModelHandler.getProcessConfig()
  if (procJson == undefined) {
    // 提示错误信息
    activeSelect.value = 'processDesign'
  }

  const procVo = new DsgnProcVo()
  procVo.configJson = procJson
  procVo.configId = procJson.id
  // designerModel.value.proc = procVo
  designerStore.setDsgnModelProc(procVo);
  return designerStore.designerModel
}
const emit = defineEmits(['exitEvent'])
/**
 * 保存草稿
 */
const draft = async () => {
  const designerModel = fillDesignerModel()

  const saveResult = await CenterApi.dsgnApprovalSave(designerModel)
  message.success('保存成功')
}

const publish= async () => {
  const designerModel = fillDesignerModel()

  const saveResult = await CenterApi.dsgnApprovalPublish(designerModel)
  message.success('发布成功')
  emit('exitEvent')
}
</script>

<style scoped lang="scss">
.flow-designer-container {
  //display: flex;

  .flow-designer-header {
    //background-color: #f2f2f2;
  }

  .flow-designer-body {
    min-height: calc(100vh - 124px);
    position: relative;
    border-radius: 5px;
  }
}
</style>

<style lang="scss">
.action_designer_drawer {
  .el-drawer__body {
    padding-top: 0 !important;
  }
}
</style>
